<script setup lang="ts">

import { reactive } from 'vue'
import { taskDetailsListAPI, taskCollectionAPI } from "@/api/task";
import TaskDetail from "@/views/task/components/TaskDetail.vue";
import { Toast } from 'vant';
import { useRoute, useRouter } from 'vue-router';

    const route = useRoute()
    const router = useRouter()
    const taskId = route.params.id

    const state = reactive({
        item: '',
        status: 0,
        loading: false
    })
   
    // 点击返回 关闭弹窗
    const onClickLeft = () => router.back()
    
    // 获取任务详情列表
    const getTaskDetailsList = async() => {
        state.loading = true
        const res = await taskDetailsListAPI({
            task_id: taskId
        })
        if (res) {
            state.item = res.records[0]
            state.status = res.records[0].status
            state.loading = false
        }else{
            Toast('获取任务详情列表失败')
            state.loading = false
        }
    }
    getTaskDetailsList()
    // 点击收藏
    const getTaskCollection = async() => {
        state.loading = true
        const res = await taskCollectionAPI({
            task_id: taskId
        })
        if (res) {
            state.status = res.data.status
        }
        state.loading = false
        Toast(res.msg)
    }
    // 立即沟通
    const gotoMessage = ()  => {
        router.push('/message/talk/'+ state.item.task_id + '/'+ state.item.user_id)
    }
</script>


<template>
    <van-nav-bar
        title="任务详情"
        left-arrow
        @click-left="onClickLeft"
    />
    <TaskDetail :item="state.item" v-if="state.item" />
    <div class="task-detail-footer">
        <van-action-bar-icon :class="state.status==1?'active':''" icon="star-o" text="收藏" @click="getTaskCollection" />
        <van-button type="primary" block @click="gotoMessage">立即沟通</van-button>
    </div>

</template>

<style scoped>
.task-detail-footer {
    display: flex;
    position: fixed;
    left: 0;
    width: 100%;
    align-items: center;
    background: #fff;
    bottom: 0;
    padding: 0.64rem 0;
}
.task-detail-footer button {
    margin-right: 0.64rem;
}
.task-detail-footer .active >>> .van-icon-star-o::before {
    color: orange;
}
</style>